<template>
    <div>商品列表</div>
    <ul>
        <li>
            <span>商品序号</span>
            <span>商品名称</span>
            <span>商品单价</span>
            <span>商品图片</span>
            <span>购买商品</span>
        </li>
        <li v-for="item in list" :key="item.id">
            <span>{{ item.id }}</span>
            <span>{{ item.title }}</span>
            <span>{{ item.price }}</span>
            <span><img :src="item.src" alt=""></span>
            <button @click="buy(item)" class="gmsp">购买商品</button>
        </li>
        
    </ul>
    <div>购买商品总价{{ total }},<button @click="toCart">查看购物车</button></div>
</template>

<script setup>
import { onMounted, reactive } from 'vue';
import shop from '../utils/shop';
import { useStore } from '../store';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
const list=reactive([])
const store=useStore()
const {total} =storeToRefs(store)
const router=useRouter()
onMounted(()=>{
shop.getGoodsList((data)=>{
    list.push(...data)
})
})
const buy=(item)=>{
    store.addProduct(item)
}
const toCart=()=>{
    router.push({name:'cart'
    })
}
</script>

<style scoped>
.gmsp{
    width: 100px;
    height: 40px;
}
ul,li{
    list-style: none;
    margin: 0;
    padding: 0;
}
li{
    width: 500px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
li img{
    width: 60px;
}
span{
    flex: 1;
    text-align: center;
    line-height: 60px;
}
</style>